<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <p class="flex flex_vcenter pdb20">
          <i class="titleTag"></i>
          <span class="fRedBig">生成随访计划</span>
        </p>
        <div class="whiteBg">
          <ul class="nav nav-tabs">
            <li role="presentation" :class="{active: activeNum == 'second'}">
              <a href="javascript:void(0);" @click="toSecond()" >门诊患者</a>
            </li>
            <li role="presentation" :class="{active: activeNum == 'first'}">
              <a href="javascript:void(0);" @click="toFirst()" >住院患者</a>
            </li>
          </ul>
          <div class="illBox firstBox" v-if="activeNum == 'first'">
            <div v-if="open">
              <ul class="formList flex">
                <li>
                  <label>出院日期段</label>
                  <div class="flex">
                    <select class="form-control" v-model="selRangeType1">
                      <option v-for="item in rangeTypeFirst" :value="item.value">{{item.name}}</option>
                    </select>
                  </div>
                </li>
                <li class="searchBox">
                  <label>出院科室</label>
                  <input type="text" class="form-control" v-model="searchDeptText">
                  <ul v-show="searchDeptList.length != 0">
                    <li v-for="item in searchDeptList" @click="selSearchDept(item)">{{item.deptName}}</li>
                  </ul>
                </li>
                <li>
                  <button class="yellowBtn" @click="searchFirst()">查 询</button>
                </li>
              </ul>
              <div class="mt20"></div>
              <table class="table table-striped table-hover">
                <thead>
                <tr>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>证件类型</th>
                  <th>证件号码</th>
                  <th>出院科室</th>
                  <th>出院时间</th>
                  <th>主管医生</th>
                  <th>出院主诊断</th>
                  <th>联系电话</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in firstTableData">
                  <td>{{item.BRXM}}</td>
                  <td>{{item.BRXB | sex}}</td>
                  <td>{{item.CSNY | old}}</td>
                  <td></td>
                  <td></td>
                  <td>{{item.BRKSVALUE}}</td>
                  <td>{{item.CYRQ.slice(0,11)}}</td>
                  <td></td>
                  <td></td>
                  <td>{{item.LXDH}}</td>
                  <td>
                  <span title="查询" @click="queryDetail(item)">
                    <img src="../../assets/img/jsszy/查询1.png" alt="" class="xicon">
                  </span>
                    <span class="pl10" title="生成" @click="toCreateZY(item)">
                    <img src="../../assets/img/jsszy/随访1.png" alt="" class="xicon">
                  </span>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="pd20 flex flex_center" v-else>暂未开放</div>
          </div>
          <div class="illBox secondBox" v-else>
            <ul class="formList flex">
              <li>
                <label style="width:105px">门诊就诊日期段</label>
                <div class="flex">
                  <select class="form-control" v-model="selRangeType2">
                    <option v-for="item in rangeTypeSecond" :value="item.value">{{item.name}}</option>
                  </select>
                </div>
              </li>
              <li class="searchBox">
                <label>就诊科室</label>
                <input type="text" class="form-control" v-model="searchDeptText2">
                <ul v-show="searchDeptList2.length != 0">
                  <li v-for="item in searchDeptList2" @click="selSearchDept2(item)">{{item.deptName}}</li>
                </ul>
              </li>
              <li>
                <button class="yellowBtn" @click="searchSecond()">查 询</button>
              </li>
            </ul>
            <div class="mt20"></div>
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>证件类型</th>
                <th>证件号码</th>
                <th>就诊科室</th>
                <th>就诊时间</th>
                <th>主管医生</th>
                <th>出院主诊断</th>
                <th>联系电话</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in secondTableData" v-if="item.LXDH">
                <td>{{item.BRXM}}</td>
                <td>{{item.BRXB | sex}}</td>
                <td>{{item.CSNY | old}}</td>
                <td></td>
                <td></td>
                <td>{{item.BRKSVALUE}}</td>
                <td>{{item.RYRQ.slice(0,11)}}</td>
                <td></td>
                <td></td>
                <td>{{item.LXDH}}</td>
                <td>
                  <span title="查询" @click="queryDetail(item)">
                    <img src="../../assets/img/jsszy/查询1.png" alt="" class="xicon">
                  </span>
                  <span class="pl10" title="生成" @click="toCreateMZ(item)">
                    <img src="../../assets/img/jsszy/随访1.png" alt="" class="xicon">
                  </span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
  export default {
    data () {
      return {
        open: false,
        rangeTypeFirst: [
          {name:'当天', value:1},
          {name:'一周内', value:2},
          {name:'一个月内', value:3}
        ],
        rangeTypeSecond: [
          {name:'当天', value:1},
          {name:'一周内', value:2},
          {name:'一个月内', value:3}
        ],
        selRangeType1: '',
        selRangeType2: '',
        activeNum: 'second',
        startDateFirst: '',
        endDateFirst: new Date(),
        startDateSecond: '',
        endDateSecond: new Date(),
        userSelEvent: false,
        userSelEvent2: false,
        searchDeptList: [],
        searchDeptText: '',
        selSearchDeptName: {},
        searchDeptList2: [],
        searchDeptText2: '',
        selSearchDeptName2: {},
        firstTableData: [],
        secondTableData: [],
        patientType: [{
          type: '住院患者',
          id: 1
        },{
          type: '门诊患者',
          id: 2
        }]
      }
    },
    components: {
      moduleHead, menuList
    },
    filters: {
      'sex' (val) {
        if (val == 1) {
          return '男'
        } else if (val == 2) {
          return '女'
        } else {
          return '不详'
        }
      },
      'old' (val) {
        if (val) {
          var year = val.slice(0,4)
          return new Date().getFullYear()-year
        }
      }
    },
    watch: {
      'searchDeptText' (val, oldval) {
        if (this.userSelEvent == false) {
          this.queryDept('first')
        } else {
          this.userSelEvent = false
        }
      },
      'searchDeptText2' (val, oldval) {
        if (this.userSelEvent2 == false) {
          this.queryDept('second')
        } else {
          this.userSelEvent2 = false
        }
      },
      'selRangeType1' (val, oldval) {
        if (val == 1) {
          var myDate = new Date(); //获取今天日期
          myDate.setDate(myDate.getDate() - 1);
          this.startDateFirst = myDate
        } else if (val == 2) {
          var myDate = new Date(); //获取今天日期
          myDate.setDate(myDate.getDate() - 7);
          this.startDateFirst = myDate
        } else if (val == 3) {
          var myDate = new Date(); //获取今天日期
          myDate.setDate(myDate.getDate() - 30);
          this.startDateFirst = myDate
        }
      },
      'selRangeType2' (val, oldval) {
        if (val == 1) {
          var myDate = new Date(); //获取今天日期
          myDate.setDate(myDate.getDate() - 1);
          this.startDateSecond = myDate
        } else if (val == 2) {
          var myDate = new Date(); //获取今天日期
          myDate.setDate(myDate.getDate() - 7);
          this.startDateSecond = myDate
        } else if (val == 3) {
          var myDate = new Date(); //获取今天日期
          myDate.setDate(myDate.getDate() - 30);
          this.startDateSecond = myDate
        }
      }
    },
    ready () {
      var self = this
      var myDate = new Date() //获取今天日期
      myDate.setDate(myDate.getDate() - 1)
      this.startDateFirst = myDate
      this.startDateSecond = myDate
//      this.startDateSecond = new Date('2016-07-09')
//      this.endDateSecond = new Date('2016-07-10')
//      this.startDateSecond = myDate
      // this.queryTableList(1, null, this.startDateFirst, this.endDateFirst, 'first')
      this.queryTableList(2, null, this.startDateSecond, this.endDateSecond, 'second')
    },
    methods: {
      toFirst () {
        this.activeNum = 'first'
      },
      toSecond () {
        this.activeNum = 'second'
        this.queryTableList(2, null, this.startDateSecond, this.endDateSecond, 'second')
      },
      queryDept (order) {
        var self = this
        if (order == 'first') {
          var param = this.searchDeptText
        } else {
          var param = this.searchDeptText2
        }
        $.when(Public.commonajaxSf("cas.doctorCerfService", "findDeptlike", JSON.stringify(['0ab18621-cc00-4c4a-9b35-4ff28a7d9bcc', param])))
          .done(function(res) {
            if (res.code == 200) {
              if (order == 'first') {
                self.searchDeptList = res.body
              } else {
                self.searchDeptList2 = res.body
              }
            }
          })
      },
      selSearchDept (item) {
        this.selSearchDeptName = item
        this.searchDeptList = []
        this.searchDeptText = item.deptName
        this.userSelEvent = true
      },
      selSearchDept2 (item) {
        this.selSearchDeptName2 = item
        this.searchDeptList2 = []
        this.searchDeptText2 = item.deptName
        this.userSelEvent2 = true
      },
      queryTableList (BRLX, BRKS, START, END, order) {
        var self = this
        var param = {
          BRLX: BRLX,
          BRKS: BRKS,
          START: START,
          END: END,
          token: sessionStorage.getItem('sfToken')
        }
        if (BRKS == null) {
          delete param.BRKS
        }
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/patientlist",
          data:param,
          success:function(res){
            if (res.Data.length != 0) {
              if (order == 'first') {
                // res.Data[0].LXDH = '18508401899'
                self.firstTableData = res.Data
              } else {
                // res.Data[0].LXDH = '18508401899'
                self.secondTableData = res.Data
              }
            } else {
              Public.ajaxPrompt("未查询到患者信息")
            }
          }
        })
      },
      searchFirst () {
//        var testDate1 = new Date('2017-12-08 10:00:00')
//        var testDate2 = new Date('2017-11-08 10:00:00')
        this.queryTableList(1, this.selSearchDeptName.localDeptId, this.startDateFirst, this.endDateFirst, 'first')
        this.queryTableList(1, this.selSearchDeptName.localDeptId, testDate2, testDate1, 'first')
      },
      searchSecond () {
        this.queryTableList(2, this.selSearchDeptName2.localDeptId, this.startDateSecond, this.endDateSecond, 'second')
      },
      queryDetail (param) {
        var patientInfo = {
          'ZYH': param.ZYH,
          'ZYHM': param.ZYHM,
          'BRXM': param.BRXM,
          'CSNY': param.CSNY,
          'RYRQ': param.RYRQ,
          'BRXB': param.BRXB,
          'BRBQVALUE': param.BRBQVALUE,
          'BRKSVALUE': param.BRKSVALUE,
          "CYRQ":param.CYRQ,
          "BRKS":param.BRKS
        }
        param.patient = patientInfo
        param = encodeURIComponent(JSON.stringify(param))
        window.location.href="visitInfoManage.html?param="+param
      },
      toCreateZY (param) {
        param = encodeURIComponent(JSON.stringify(param))
        window.location.href="createVisitPlanZY.html?param="+param
      },
      toCreateMZ (param) {
        param = encodeURIComponent(JSON.stringify(param))
        window.location.href="createVisitPlanMZ.html?param="+param
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .nav-tabs>li.active>a{
    color: #9E3110;
    cursor: pointer;
  }
  .formList>li{
    display:flex;
    -webkit-display:flex;
    padding:10px;
    align-items: center;
  }
  .formList>li>label{
    width:80px;
  }
  .searchBox{
    position:relative;
  }
  .searchBox>ul{
    position:absolute;
    top:37px;
    width:196px;
    right:0;
    max-height: 150px;
    overflow: auto;
    background-color: white;
    border-right: 5px;
    border: 1px solid #FAEEE9;
  }
  .searchBox>ul>li{
    cursor: pointer;
    padding:5px 0 5px 10px;
  }
  .searchBox>ul>li:hover{
    background-color: #FAEEE9;
  }
</style>
